<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min.js"></script>
</head>
<body>
    <ui id="aVilew">

    </ui>
</body>
<script>
    var MyItem = Backbone.Model.extend({

    })
    var MyCollection = Backbone.Collection.extend({
        url:     'http://api.yytianqi.com/forecast7d?city=CH020100&key=vcgm5rb2c9nmtt25',
        model:MyItem
    })


    var MyItemView = Backbone.View.extend({
        tagName:'li',
        render:function(){
            this.$el.html(this.model.get('title'))
            return this;
        }
    })
    var MyCollectionView = Backbone.View.extend({
         initialize:function(){
             this.listenTo(this.collection,'reset',this.render);
             this.views = [];
         },
        render:function(){
            var that = this;
            _.each(this.view,function(view){
                console.log(view)
                view.remove();
            });
            //this.$el.empty();
            this.collection.each(function(model){
                var view = new MyItemView({
                    model:model
                });
                that.views.push(view);
                that.$el.append(view.render().$el)
            })
        }
    })

    var mycollection = new MyCollection()
    var mycllectionView = new MyCollectionView({
        collection:mycollection,
        el:'#aVilew'
    })
    mycollection.fetch({
        reset:true
    })

</script>
</html>